<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <header>Primary Navigation Or Tools</header>
  <nav>Secondary Navigation</nav>
  <main>Main Content Space</main>
  <aside>tertiary Navigation</aside>
  <footer>Miscellaneous Information</footer>
</div>
</template>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "nav    footer footer"
  ;
  & > * {
    padding: 1rem;
    color: #fff;
    font-size: clamp(1rem, 1.125rem + 1vw, 1.5rem);
    text-shadow: 1px 1px 0 rgba(0 0 0 / 0.25);
  }

  header {
    background-color: #f7cb44;
    grid-area: header;
  }
  footer {
    background-color: #f78253;
    grid-area: footer;
  }
  nav {
    background-color: #3a9d1b;
    grid-area: nav;
  }
  aside {
    background-color: #9e24c6;
    grid-area: aside;
  }
  main {
    background-color: #232ac1;
    grid-area: main;
  }


}
</style>
